<template>
  <div class="custom-page">
    <div v-for="(item, index) in detailsList" :key="index">
      <!-- 按钮组 -->
      <component-buttons :content="item" :customerInfo="customerInfo" :memberInfo="memberInfo" v-if="item.componentType === 11" @linkTo="linkTo"></component-buttons>
      <!-- 图片组 -->
      <component-picture 
        v-if="item.componentType === 12"
        :pictureInfo="item.pictureList"
        :pictureProps="item.propMap"
        :customerInfo="customerInfo"
        :memberInfo="memberInfo"
        @linkTo="linkTo">
      </component-picture>
      <!-- 标题栏 -->
      <component-title-bar :content="item" v-if="item.componentType === 13" @linkTo="linkTo"></component-title-bar>
      <!-- 富文本 -->
      <component-rich-text :content="item" v-if="item.componentType === 14"></component-rich-text>
      <!-- 搜索框 -->
      <component-search :content="item" v-if="item.componentType === 15"></component-search>
      <!-- 视频 -->
      <component-video :content="item" v-if="item.componentType === 16"></component-video>
      <!-- 音频 -->
      <component-audio :content="item" @audioPlay="audioPlay" @audioPause="audioPause" v-if="item.componentType === 17"></component-audio>
      <!-- 轮播组 -->
      <template v-if="item.componentType === 19">
        <component-swiper :autoplay="true" :swiperInfo="item.swiperList" :swiperProps="item.propMap" :avatar="memberInfo.avatar" :nickname="memberInfo.nickname + '的V客主页'" @linkTo="linkTo"></component-swiper>
      </template>
      <!-- 商品组 -->
      <component-goods :content="item" v-if="item.componentType === 20"></component-goods>
      <!-- 悬浮按钮 -->
      <component-float-btn :floatList="item.floatButtonList" urlFrom="home" @linkTo="linkTo" v-if="item.componentType === 21"/>
      <component-dividing :content="item" v-if="item.componentType === 22"></component-dividing>
    </div>
  </div>
</template>
<script>
import ComponentSwiper from './components/componentSwiper/index'
import ComponentButtons from './components/componentButtons/index'
import ComponentPicture from './components/componentPicture/index'
import ComponentSearch from './components/componentSearch/index'
import ComponentFloatBtn from './components/componentFloatBtn/index'
import ComponentTitleBar from './components/componentTitleBar/index'
import ComponentRichText from './components/componentRichText/index'
import ComponentDividing from './components/componentDividing/index'
import ComponentVideo from './components/componentVideo/index'
import ComponentAudio from './components/componentAudio/index'
import ComponentGoods from './components/componentGoods/index'
import { getMemberInfo } from '@/api/home'
export default {
  components: {
    ComponentSwiper,
    ComponentButtons,
    ComponentPicture,
    ComponentSearch,
    ComponentFloatBtn,
    ComponentTitleBar,
    ComponentRichText,
    ComponentDividing,
    ComponentVideo,
    ComponentAudio,
    ComponentGoods
  },
  props: {
    content: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      detailsList: [],
      memberInfo: {},
      customerInfo: {},
      audioCtx: [],
      audioCtxObj: {},
      linkList: {
        1004: '/pages/shop/main', // 分类链接
        1005: '/pages/home/main', // 首页
        1101: '/pages/home/second-custom/main', // 自定义页面
        2001: '/pages/shop/detail/main' // 商品详情
      }
    }
  },
  watch: {
    content: {
      deep: true,
      immediate: false,
      handler(newVal) {
        // console.log('第一次进入页面', newVal)
        this.data()
      }
    }
  },
  methods: {
    getMemberInfo() {
      getMemberInfo(this.getMemberId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
      }).catch(() => {
      })
      if (this.getRoleType === 2) return
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.customerInfo = response.data
      }).catch(() => {
      })
    },
    async data() {
      // if (!this.getMemberId) return
      this.detailsList = []
      this.getMemberInfo()
      // 将父组件传入的数据进行深拷贝
      let cloneData = this.$utils.deepClone(this.content)
      for (let i = 0; i < cloneData.length; i++) {
        if (cloneData[i].componentType === 11) {
          cloneData[i].length = cloneData[i].buttonGroupList.length
          cloneData[i].buttonGroupList = this.btnTotalChange(cloneData[i])
        }
        if (cloneData[i].componentType === 17) {
          let num = cloneData[i].sortNo
          this.audioCtx.push(num)
          cloneData[i].show = false
        }
        if (cloneData[i].componentType === 20) {
          const list = []
          if (cloneData[i].goodsList) {
            cloneData[i].goodsList.forEach(item => {
              // 网红在卖人数
              item.anchorSalePeople = item.putawayNum + item.virtualPutawayNum
            })
          }
          if (cloneData[i].propMap.selectType === '10') {
            if (cloneData[i].goodsList) {
              if (cloneData[i].goodsList.length) {
                let goodsList = cloneData[i].goodsList
                for (let a = 0; a < goodsList.length; a++) {
                  goodsList[a].selShow = false
                  // this.showFastNum(goodsList[a])
                  list.push(goodsList[a])
                }
              }
            }
          } else {
            if (cloneData[i].goodsPage) {
              if (cloneData[i].goodsPage.records.length) {
                let records = cloneData[i].goodsPage.records
                for (let a = 0; a < records.length; a++) {
                  records[a].selShow = false
                  // this.showFastNum(records[a])
                  list.push(records[a])
                }
              }
            }
          }
          cloneData[i] = Object.assign({ list: list }, cloneData[i])
        }
      }
      this.detailsList = cloneData
      let that = this
      setTimeout(() => {
        for (var a = 0; a < that.audioCtx.length; a++) {
          let item = that.audioCtx[a]
          that.audioCtxObj[item] = that.$pt.createAudioContext('myAudio' + item)
          that.audioCtxObj[item].show = false
        }
        for (var b = 0; b < this.detailsList.length; b++) {
          if (this.detailsList[b].componentType === 17) {
            if (this.detailsList[b].audio.autoPlayback === 1) {
              let numOn = this.detailsList[b].sortNo
              this.audioCtxObj[numOn].play()
              this.detailsList[b].show = true
              const changeData = this.detailsList[b].show
              this.$delete(this.detailsList[b], 'show')
              this.$set(this.detailsList[b], 'show', changeData)
            }
          }
        }
      }, 200)
    },
    btnTotalChange(item) {
      this.listArr = []
      let arr2 = []
      let arr3 = []
      let count = 1
      // if (item.templateType !== 1) return item.buttonGroupList
      for (let i = 0; i < item.buttonGroupList.length; i++) {
        arr3.push(item.buttonGroupList[i])
        if (arr3.length === parseInt(item.propMap.rowNum) || (i + 1 === item.buttonGroupList.length)) {
          arr2.push(arr3)
          arr3 = []
        }
        if ((i + 1 === parseInt(item.propMap.rowNum) * parseInt(item.propMap.pageNum * count)) || (i + 1 === item.buttonGroupList.length)) {
          this.listArr.push(arr2)
          count++
          arr2 = []
        }
      }
      return this.listArr
    },
    audioPlay(num) {
      for (var i = 0; i < this.detailsList.length; i++) {
        if (this.detailsList[i].sortNo === num) {
          this.detailsList[i].show = true
          const changeData = this.detailsList[i].show
          this.$delete(this.detailsList[i], 'show')
          this.$set(this.detailsList[i], 'show', changeData)
        } else {
          this.detailsList[i].show = false
          const changeData = this.detailsList[i].show
          this.$delete(this.detailsList[i], 'show')
          this.$set(this.detailsList[i], 'show', changeData)
        }
        if (this.detailsList[i].type === 'audio') {
          this.audioCtxObj[i].pause()
        }
        this.audioCtxObj[num].play()
      }
    },
    audioPause(num) {
      this.audioCtxObj[num].pause()
      for (var i = 0; i < this.detailsList.length; i++) {
        if (this.detailsList[i].sortNo === num) {
          this.detailsList[i].show = false
        }
      }
    },
    linkTo(item) {
      if (item.linkType) {
        const linkType = Number(item.linkType)
        if (linkType === 1004) {
          const linkParams = JSON.parse(item.linkParams)
          console.log(linkParams)
          this.$emit('categoryLink', linkParams)
          return
        }
        if (item.linkParams) {
          this.$pt.navigateTo({ url: this.linkList[item.linkType] + item.linkParams })
        } else {
          this.$pt.navigateTo({ url: this.linkList[item.linkType] })
        }
      }
    }
  },
  onShow() {}

}
</script>
<style lang="less" scoped>

</style>
